<template>
  <div class="order_list">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-input style="width:30%" v-model="search_val" placeholder="请输入搜索条件">
        <el-button slot="append" icon="el-icon-search" @click="searchOrder"></el-button>
      </el-input>

      <el-table :data="order_list" border stripe>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号"> </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-button plain size="mini" type="success" v-if="scope.row.order_pay==='1'">已付款</el-button>
            <el-button plain size="mini" type="danger" v-else>未付款</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            {{scope.row.create_time|dateFmt}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" class="el-icon-edit" size="mini" @click="editDialogVisible=true"></el-button>
            <el-button type="success" class="el-icon-location" size="mini" @click="showProgress"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query_obj.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query_obj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 编辑订单的弹窗 -->
    <el-dialog
      title="编辑订单"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
      >
      <el-form ref="editFormRef" :model="address_form" label-width="100px" :rules="editRules">
        <el-form-item label="省市区/县" prop="address1">
          <el-cascader
          style="width:100%"
            :options="CityData"
            :props="cascadeProps"
            v-model="address_form.address1"
            @change="cascadeChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="address_form.address2"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 物流信息的弹窗 -->
    <el-dialog
      title="物流信息"
      :visible.sync="progressDialogVisible"
      width="50%"
      >
      <el-timeline>
        <el-timeline-item
          v-for="(item,index) in progress_list"
          :key="index"
          :timestamp="item.time">
          {{item.context}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import CityData from './citydata.js';
export default{
  data(){
    return {
      query_obj:{
        query:'',
        pagenum:1,
        pagesize:5,
        user_id:'',
        pay_status:'',//支付状态
        is_send:'', //是否发货
        order_fapiao_title:'',//个人或公司
        order_fapiao_company:'',//公司名
        order_fapiao_content:'',//发票内容
        consignee_addr:'',//发货地址
      },
      total:0,
      order_list:[],//订单数据
      search_val:'',//搜索的双向绑定的值
      CityData,//城市数据
      editDialogVisible:false ,
      cascadeProps:{
        label:'label',
        value:'value',
        children:'children',
        expandTrigger: 'hover'
      },//级联选择器的配置对象
      address_form:{
        address1:'',
        address2:''
      },//编辑表单的值
      editRules:{
        address1: [
            { required: true, message: '请选择地址', trigger: 'blur' },
          ],
        address2: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在1 到 30 个字符', trigger: 'blur' }
          ]
      },
      progressDialogVisible:false,//物流信息显示控制
      progress_list:[] //物流信息的数组
    }
  },
  created(){
    this.initOrderList()
  },
  methods:{
    //初始化数据
    async initOrderList(){
      const res=await this.$http.get('orders',{params:this.query_obj})
      console.log(res);
      if(res.data.meta.status!==200) return this.$message.error('数据获取失败')
      this.order_list=res.data.data.goods
      this.total=res.data.data.total
    },
    //页码大小改变
    handleSizeChange(newVal){
      // console.log(newVal);
      this.query_obj.pagesize=newVal
      this.initOrderList()
    },
    //当前页码改变
    handleCurrentChange(newVal){
      this.query_obj.pagenum=newVal
      this.initOrderList()
    },
    cascadeChange(){
      console.log(this.address_form.address1);
    },
    editDialogClosed(){
      this.$refs.editFormRef.resetFields()
    },
    async showProgress(){
      this.progressDialogVisible=true
      const res=await this.$http.get('/kuaidi/1106975712662')
      console.log(res);
      if(res.data.meta.status!==200) return  this.$message.error('获取物流信息失败')
      this.progress_list=res.data.data
    },
    searchOrder(){
      console.log(123);
      this.query_obj.query=this.search_val
      this.initOrderList()
    }
  }
}
</script>

<style lang="less" scoped>
.order_list{
  .el-card{
    margin-top: 20px;
    .el-table{
      margin-top: 20px;
    }
    .el-pagination{
      margin-top: 20px;
    }
  }
}
</style>